<template>
  <var-app-bar title="标题" class="navbar">
    <template #right>
      <var-menu>
        <var-button color="transparent" text-color="#fff" round text>
          <var-icon name="menu" :size="24" />
        </var-button>

        <template #menu>
          <var-cell ripple @click="() => StyleProvider(null)">🔆</var-cell>
          <var-cell ripple @click="() => StyleProvider(Themes.dark)"
            >🌙</var-cell
          >
        </template>
      </var-menu>
    </template>
  </var-app-bar>
</template>

<script setup>
import { StyleProvider, Themes } from "@varlet/ui";
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  z-index: 2;
}
</style>
